/*
  学习目标：useEffect第二个参数使用小结
  步骤：
     1. []
     2. [依赖项]
     3. 不写
*/

import React, { useState } from 'react';
import { useEffect } from 'react';

export default function App() {
  const [count, setCount] = useState(99);
  const [msg, setMsg] = useState('hello React');

  // 1. ✅[] 代表挂载后
  // 场景：发请求、最先获取dom，开启定时器等
  useEffect(() => {}, []);

  // 2.✅ [依赖项] 代表挂载、更新二合一
  // 类似： vue中watch开了immediately
  // 💥 只会监听依赖项的变化
  useEffect(() => {
    // console.log('count  ----->  ', count);
  }, [count]);

  // 3.  不写，代表更新二合一
  // 💥会监听所有的依赖项变化，
  // 缺点： 可能造成性能浪费
  useEffect(() => {
    console.log('count  ----->  ', count);
  });

  return (
    <div>
      <h1>{count}</h1>
      <h1>{msg}</h1>
      <button onClick={() => setCount(count + 1)}>点我+1</button>
      <button onClick={() => setMsg(msg + '~')}>点我+~</button>
    </div>
  );
}
